<script type="text/javascript">
<!--{literal}
$(document).ready
(
    function()
    {
	$('div.dialog#detail').dialog
	(
	    'option',
	    {
		title:	'Формирование детализации',
		resizable:	false,
		width:	800
	    }
	);

	$('input#detail-button').click(function(){$('div.dialog#detail').dialog('open');});

	$('table#detail-grid')
	    .jqGrid
	    ({
		colNames:	['Номер','Назначение','Продолжительность','Стоимость','Себестоимость','Направление'],
		colModel:
		[
		    {name:'phone_number',width:100},
		    {name:'phone_dest',width:100},
		    {name:'duration',width:90},
		    {name:'cost',width:120},
		    {name:'selfcost',width:120},
		    {name:'direction',width:250}
		]
	    });
    }
);
{/literal}-->
</script>

<div class="dialog" id="detail">
    <center>Период с <input type="text" class="date" id="detail-start"/> по <input type="text" class="date" id="detail-end"/></center>
    <table id="detail-grid"></table>
    <div id="detail-grid-pager"></div>
</div>

<!-- Таблица списка услуг -->
<table id="service" width="95%" class="ui-widget" rules="all" cellspacing="0">
    <thead class="ui-widget-header">
	<tr>
	    <th rowspan="2">&nbsp;</th>
	    <th rowspan="2">#</th>
	    <th rowspan="2">Услуга</th>
	    <th rowspan="2">Ответственный</th>
	    <th rowspan="2">Стоимость</th>
	    <th rowspan="2">Ежемесячная</th>
	    <th colspan="2">Период действия</th>
	    <th rowspan="2">Номер</th>
	    <th rowspan="2">Тариф</th>
	    <th rowspan="2">Начисления</th>
	    <th rowspan="2">Начисления<br/><small>себестоимость</small></th>
	    <th rowspan="2">&nbsp;</th>
	</tr>
	<tr>
	    <th>Начало</th>
	    <th>Конец</th>
	</tr>
    </thead>
    <tbody>
    {foreach from=$services item=service name=service}
	<tr class="data-row">
	    <td align="center"><span style="display: none;">{$service.srv_id}</span><input type="checkbox" {if $service.service_name_id!=3}disabled{/if}/></td>
	    <td>{$smarty.foreach.service.iteration}</td>
	    <td>{$service.service_name}</td>
	    <td>{$service.executive_name}</td>
	    <td align="right" style="padding-right: 2em;">{$service.cost|string_format:'%0.2f'}</td>
	    <td align="center"><img src="images/icons/{if $service.monthly==1}tick_16.png{else}block_16.png{/if}"/></td>
	    <td align="center">{if $service.start_date>0}{$service.start_date|date_format:'%d.%m.%Y'}{else}&mdash;{/if}</td>
	    <td align="center">{if $service.stop_date>0}{$service.stop_date|date_format:'%d.%m.%Y'}{else}&mdash;{/if}</td>

	    {* Проверяем, является ли услуга телефонией. В нашем случае это услуга (service_name) имеет ID=3 *}
	    {if $service.service_name_id==3}
	    <td align="center">{$service.phone_number}</td>
	    <td align="center">{$service.rate_name}</td>
	    <td align="center" colspan="2">&mdash;</td>
	    {else}
	    <td align="center" colspan="4">&mdash;</td>
	    {/if}

	    <td align="center"><a href="service-delete.php?id={$service.srv_id}"><img src="images/icons/delete_16.png" border="0"/></a></td>
	</tr>
    {foreachelse}
	<tr><td colspan="8" align="center"><i>нет услуг</i></td></tr>
    {/foreach}
    </tbody>
</table>
<br/><br/>
<a href="javascript:void(0)" id="service-add"><img src="images/icons/plus_16.png" border="0"/>&nbsp;Добавить услугу</a>
<br/><br/>
<input type="button" value="Детализация" class="button" id="detail-button"/>
